<!--
 * @Description: 
 * @Author: 张文韬
 * @Date: 2022-06-28 17:39:05
 * @LastEditTime: 2022-07-02 13:12:00
 * @LastEditors: 张文韬
 * @Reference: 
-->
<template>
  <div>
    <el-descriptions 
      v-bind="$attrs">
      <el-descriptions-item v-for="(item, index) in formOptions" 
        :key="index" 
        :label="item.label" 
        v-bind="item.props">
        <template v-if="item.slotName">
          <slot :name="item.slotName"
                :scope="item"></slot>
        </template>
        <template v-else-if="item.format">{{ item.format(formData[item.key], item.key, item) }}</template>
        <template v-else>{{ formData[item.key] || '无' }}</template>
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  name: 'e-descriptions',
  components: { },
  props: {
    formOptions: {
      type: [Array, Object],
      default () {
        return [];
      }
    },
   
    formData: {
      type: Object,
      default () {
        return {};
      }
    },
    // column: {
    //   type: Number,
    //   default: 3
    // },
    // title: {
    //   type: String,
    //   default: ''
    // },
    // direction:{
    //   type: String,
    //   default: ''
    // },
    // border: {
    //   type: Boolean,
    //   default: false
    // },
    // colon:  {
    //   type: Boolean,
    //   default: false
    // },
  },
  data () {
    return {
      // formData: {}
    };
  },
  watch: {
    formOptions: {
      handler (value) {
        // this.handleFormDataCreate(value);
      },
      immediate: true
    },
  },
  computed: {
  },
  methods: {
  },
  created () { },
  mounted () { }
};
</script>
<style lang="scss" scoped>
.e-search-from-item {
  .el-select {
    width: 100%;
  }
}
.selectfromdown {
  height: 40px !important;
}
// .el-date-picker {
//   height: 40px !important;
// }
</style>
